<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>

<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1 style="display: inline-block">新增库存划项目标记</h1>
    <button onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header" style="text-align: left">
                    <form id="modalQueryForm">
                        <div class="row" id="HiddenDiv">
                            <div class="form-inline">
                                <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                    <label>
                                        物料分类
                                    </label>
                                    <select id="ityMatType" name="ityMatType"
                                            class="form-control select">
                                        <option value="" selected="selected">全部</option>
                                        <option value="2">外协件</option>
                                        <option value="4">铝料</option>

                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>
                                        物料描述
                                    </label>
                                    <input type="text" id="ityMatNameQuery" name="ityMatNameQuery"
                                           class="form-control"
                                           placeholder="请输入物料描述">
                                </div>
                                <div class="form-group">
                                    <label>
                                        SAP物料编码
                                    </label>
                                    <input type="text" id="itySapCode" name="itySapCode"
                                           class="form-control"
                                           placeholder="请输入物料编码">
                                </div>
                                <div class="form-group">
                                    <label>
                                        图号
                                    </label>
                                    <input type="text" id="ityDrawingCodeQuery" name="ityDrawingCodeQuery"
                                           class="form-control"
                                           placeholder="请输入图号">
                                </div>
                                <div class="form-group">
                                    <label>
                                        规格
                                    </label>
                                    <input type="text" id="itySpec" name="itySpec"
                                           class="form-control"
                                           placeholder="请输入规格">
                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn btn-success" id="btn_inventorySearch">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                </div>
                                <!--<div id="toolbar">
                                    <a shiro:hasPermission="matinv:matwarproexport:add"
                                       th:href="@{/half/halInvManage/invToProMark/import}"
                                       class="btn btn-info pull-right">标记导入</a>
                                </div>-->
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="inventoryQueryTable" class="table table-bordered " width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!--库存划项目标记模态框-->
<div class="modal fade" id="modal-inventory-project">
    <div class="modal-dialog" style="width:600px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">库存划项目标记</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                            </div>
                            <div class="box-body">
                                <form id="modalForm" class="form-horizontal" role="form">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <input type="hidden" name="ipmBeforeItyId">
                                                <label class="control-label col-sm-3"
                                                       for="ityMatDescModal">物料描述<br>（铝料类型）</label>
                                                <div class="col-sm-9">
                                                    <input name="ityMatDesc" id="ityMatDescModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3"
                                                       for="ipmInProjectCodeModal">新项目编码</label>
                                                <div class="col-sm-9">
                                                    <input name="ipmInProjectCode"
                                                           id="ipmInProjectCodeModal"
                                                           class="form-control" type="text"
                                                           list="ceoNeedProCodeList"
                                                           autocomplete="off"
                                                           onchange="changeIpmInProjectName()"
                                                           oninput="findProCodeListData(this)"/>
                                                    <datalist id="ceoNeedProCodeList">
                                                    </datalist>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3"
                                                       for="ipmInProjectNameModal">新项目名称</label>
                                                <div class="col-sm-9">
                                                    <input name="ipmInProjectName" id="ipmInProjectNameModal"
                                                           class="form-control" type="text" readonly/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3" for="ityAvaNumModal">可用数量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ityAvaNum" id="ityAvaNumModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                                <label class="control-label col-sm-3">可用重量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ityAvaWeight" id="ityAvaWeightModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3" for="ipmNumModal">标记数量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ipmNum" id="ipmNumModal"
                                                           oninput="checkValue(this)"
                                                           class="col-sm-5 form-control" type="text"/>
                                                </div>
                                                <label class="control-label col-sm-3">标记重量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ipmWeight" id="ipmWeightModal"
                                                           class="col-sm-5 form-control" type="text" readonly/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3" for="ipmRemarkModal">划拨说明</label>
                                                <div class="col-sm-9">
                                                    <input name="ipmRemark" id="ipmRemarkModal" class="form-control"
                                                           type="text" maxlength="255"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" id="btn-save">保存</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;
    var modalTable;
    var statusText = ["无状态", "制作中", "待制作", "暂缓", "完成"];



    /**
     *@FunctionName: checkValue
     *@Description: 修改标记数量  同时改变标记重量
     *@Author: TH
     */
    function checkValue(obj) {
        var weight = $("#modalForm [name='ityAvaWeight']").val();
        var avaNum = $("#modalForm [name='ityAvaNum']").val();
        var num = $("#modalForm [name='ipmNum']").val();
        if(weight != null){
            var ipmWeight = weight/avaNum*num;
            ipmWeight = Math.round(ipmWeight*1000)/1000;
            $("#modalForm [name='ipmWeight']").val(ipmWeight);
        }
    }


    /**
     *@FunctionName: loadInventory
     *@Description: 加载库存
     *@Author: TH
     *@CreateDate: 2020/4/16 9:27
     *
     *@Param:
     *@Return:
     *@Version:
     */
    function loadInventory() {
        $('#inventoryQueryTable').bootstrapTable('destroy');
        modalTable = js.table.init({
            id: 'inventoryQueryTable',
            url: ctx + "half/halInvManage/invToProMark/inventoryList",
            sortable: true,                                    // 是否启用排序
            sortStable: true,                                  // 设置为 true 将获得稳定的排序
            showColumns: true,
            showExport: false,
            uniqueId: "ityId",
            queryForm: 'modalQueryForm',
            pageSize: 300,
            onLoadSuccess: function () {
                $('#inventoryQueryTable thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#inventoryQueryTable tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: [
                {
                    title: '序号', field: 'ityId', width: '40',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '物料分类', field: 'ityMatType',
                    formatter: function (value, row, index) {
                        if(value == 2){
                            return "外协件";
                        }else if(value == 3){
                            return "制作件";
                        }else if(value == 4){
                            return "铝料";
                        }else {
                            return "";
                        }
                    }},
                {title: '物料描述', field: 'ityMatName'},
                {title: '规格', field: 'itySpec'},
                {title: 'SAP物料编码', field: 'itySapCode'},
                {title: '图号', field: 'ityDrawingNumber'},
                {title: '可用数量', field: 'ityAvaNum'},
                {title: '单位', field: 'ityUnit'},
                {title: '可用重量', field: 'ityAvaWeight',
                    formatter: function (value, row, index) {
                        return Math.round(row.ityAvaWeight*1000)/1000;
                    }},
                {title: '跟踪号', field: 'ityTrackCode'},
                //{title: '品牌', field: 'ityBrand'},
                {title: '项目编号', field: 'ityProCode'},
                {title: '项目名称', field: 'ityProName'},
                {title: '备注', field: 'ityRemark', width: '150'},
                {
                    title: '  操作',
                    width: '40',
                    field: 'ityDataStatus',
                    formatter: function (value, row, index) {
                        var ityDataStatus = "";
                        if (value == 2) {
                            ityDataStatus = 'disabled';
                        } else {
                            ityDataStatus = '';
                        }
                        return '<button class="btn btn-info btn-xs" ' + ityDataStatus + ' onclick="selectInventoryToProject(' + row.ityId + ')" type="button" >标记</button>';
                    }
                }
            ]
        });
    }

    /**
     *@FunctionName: selectInventoryToChange
     *@Description: 选择
     *@Author: TH
     *@CreateDate: 2020/4/16 10:43
     *
     *@Param: [ityId]库存主键
     *@Version: 1.0.0
     */
    function selectInventoryToProject(ityId) {
        $("#modalForm [name='ipmInProjectCode']").val("");
        $("#modalForm [name='ipmInProjectName']").val("");
        $("#modalForm [name='ipmNum']").val("");
        $("#modalForm [name='ipmWeight']").val("");
        var rows = $('#inventoryQueryTable').bootstrapTable('getRowByUniqueId', ityId);//行的数据
        js.modal.open("modal-inventory-project");
        $("#modalForm [name='ityMatDesc']").val(rows.ityMatName);
        $("#modalForm [name='ityAvaNum']").val(rows.ityAvaNum);
        $("#modalForm [name='ityAvaWeight']").val(Math.round(rows.ityAvaWeight*1000)/1000);
        $("#modalForm [name='ityAvaNumUnit']").val(rows.ityNumUnit);
        $("#modalForm [name='ipmNumUnit']").val(rows.ityNumUnit);
        $("#modalForm [name='ipmBeforeItyId']").val(rows.ityId);
    }

    function removeInventory(rppId) {
        if (rppId == '') {
            $('input[name="cb_inventory"]').each(function () {


                if ($(this).prop("checked")) {
                    rppId += $(this).attr("data") + ",";
                }
            })
            rppId = rppId.substring(0, rppId.length - 1)
        }
        js.modal.confirm("您确认要移除此库存吗？", function () {
            $.post(ctx + 'change/removeInventory', {
                    ceoRppIds: rppId,
                },
                function (result) {
                    if (result.type == 'SUCCESS') {
                        js.modal.hide("modal-select-purchase");
                        search();
                    }
                }, 'json');
        });
    }

    /**
     *@FunctionName: findWarehouseList
     *@Description: 获取仓库列表
     *@Author: TH
     *@CreateDate: 2020/3/24 15:31
     *
     *@Version: 1.0.0
     */
    function findWarehouseList() {
        js.ajax({
            url: ctx + 'common/warehouseInfo/list',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {},
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    $('#ityWhiId').empty();
                    $('#ityWhiId').append('<option value="">全部</option>');
                    $("#changeOrderForm [name='ceoUseWhiId']").empty();
                    for (var i = 0; i < result.data.rows.length; i++) {
                        $('#ityWhiId').append('<option value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                        $("#changeOrderForm [name='ceoUseWhiId']").append('<option value="' + result.data.rows[i].whiId + '">' + result.data.rows[i].whiName + '</option>');
                    }
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        })
    }


    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: TH
     *@CreateDate: 2020/4/10 16:10
     *
     *@Version: 1.0.0
     */
    function search() {
        js.table.search(table);
    }

    /**
     *@FunctionName: selectAll
     *@Description: 全选
     *@Author: TH
     *@CreateDate: 2020/4/8 15:20
     *
     *@Version: 1.0.0
     */
    function selectAll(obj) {

        $('input[name="cb_inventory"]').each(function () {
            if (!$(this).prop("disabled")) {
                if ($(obj).prop("checked")) {
                    $(this).prop("checked", true);
                }
                if ($(obj).prop("checked") == false) {
                    $(this).prop("checked", false);
                }
            }
        })

    }

    /**
     *@FunctionName: findProCodeListData
     *@Description: 根据项目号模糊查询获取项目号列表
     *@Author: TH
     *@CreateDate: 2020/4/18 12:59
     *
     *@Version: 1.0.0
     */
    function findProCodeListData(obj) {
        $.post(ctx + 'purchase/invPro/findProCodeList', {
            code: $(obj).val()
        }, function (result) {
            if (result.type == 'SUCCESS') {
                $("#ceoNeedProCodeList").empty();
                for (var i = 0; i < result.data.length; i++) {
                    $("#ceoNeedProCodeList").append('<option value="' + result.data[i].code + '" data="' + result.data[i].name + '" data-status="' + result.data[i].status + '"></option>');
                }
            }
        }, 'json');
    }

    function changeIpmInProjectName() {
        var input_select = $("#modalForm [name='ipmInProjectCode']").val();
        var option_length = $("#ceoNeedProCodeList").find("option").length;
        for (var i = 0; i < option_length; i++) {
            if (input_select == $("#ceoNeedProCodeList option").eq(i).attr('value')) {
                $("#modalForm [name='ipmInProjectName']").val($("#ceoNeedProCodeList option").eq(i).attr("data"));
                break;
            }
        }
    }

    $(function () {
        $("#import").click(function () {
           location.href=ctx+'purchase/invPro/importPage';
        })

        findWarehouseList();
        loadInventory();
        //重置
        $("#btn_reset").on('click', function () {
            //JQuery清空表单内容
            $("#changeOrderForm")[0].reset();
            //bootstrapValidator清空重置验证提示状态
            $(".form-horizontal").data("bootstrapValidator").resetForm();
            js.modal.success("重置表单成功！");
        })
        //保存
        $("#btn-save").on('click', function () {
            var ipmNumModal = parseFloat($("#ipmNumModal").val());
            var ityAvaNumModal =  parseFloat($("#ityAvaNumModal").val());
            if(ipmNumModal <= 0){
                js.modal.warning("标记数量必须大于0！")
                return;
            }
            if(ipmNumModal > ityAvaNumModal){
                js.modal.warning("标记数量不能大于可用数量！")
                return;
            }
            //验证通过式提交
            js.validSubmit({
                formId: "modalForm",
                url: ctx + "half/halInvManage/invToProMark/save",
                data: new FormData($("#modalForm")[0]),
                success: function (result) {
                    window.history.back();
                }
            });
        })


        // 验证初始化
        js.validate.init("modalForm", {
            fields: {
                ipmInProjectCode: {
                    validators: {
                        notEmpty: {message: '请输入新项目编码'},
                        threshold: 6, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            type: 'POST',
                            url: ctx + "purchase/invPro/codeExist",//验证地址
                            message: '项目号不存在',//提示消息
                            delay: 100,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                            /**自定义提交数据，默认值提交当前input value
                             *  data: function(validator) {
                               return {
                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                               };
                            }
                             */
                        }
                    }
                },
                //ipmRemark: {validators: {notEmpty: {message: '请输入备注'}}},
                ipmNum: {
                    validators: {
                        notEmpty: {message: '请输入标记数量'}
                    }
                }
            }
        });

        /**
         * 表格搜索
         */
        $("#btn_inventorySearch").on('click', function () {
            js.table.search(modalTable);
        });

    });

</script>
</body>
</html>
